<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册 - 智能迭代</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
    <script defer src="{{ url_for('static', filename='js/auth.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
    <div class="form-container">
        <div class="auth-tabs">
            <button id="login-tab" class="auth-tab active" type="button">登录</button>
            <button id="register-tab" class="auth-tab" type="button">注册</button>
        </div>
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            <ul class="flashes">
            {% for category, message in messages %}
              <li class="{{ category }}">{{ message }}</li>
            {% endfor %}
            </ul>
          {% endif %}
        {% endwith %}
        <form id="login-form" method="post" action="/auth" style="display:none;">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required autocomplete="username">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required autocomplete="current-password">
            </div>
            <button type="submit" class="btn">登录</button>
            <p style="margin-top:12px;">还没有账号？<a href="#" onclick="switchAuthTab('register');return false;">注册</a></p>
            <p><a href="/">返回首页</a></p>
        </form>
        <form id="register-form" method="post" action="/auth" enctype="multipart/form-data" style="display:none;">
            <div class="form-group">
                <label for="reg-username">用户名</label>
                <input type="text" id="reg-username" name="username" required autocomplete="username">
            </div>
            <div class="form-group">
                <label for="reg-password">密码</label>
                <input type="password" id="reg-password" name="password" required autocomplete="new-password">
            </div>
            <div class="form-group">
                <label for="confirm_password">确认密码</label>
                <input type="password" id="confirm_password" name="confirm_password" required autocomplete="new-password">
            </div>
            <div class="form-group">
                <label for="avatar-upload">头像（可选）</label>
                <input type="file" id="avatar-upload" name="avatar" accept="image/*">
                <div class="avatar-preview">
                    <img id="avatar-preview-img" src="{{ url_for('static', filename='images/default_avatar.png') }}" alt="头像预览" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-top: 10px; border: 2px solid #D4AF37;">
                </div>
            </div>
            <button type="submit" class="btn">注册</button>
            <p style="margin-top:12px;">已有账号？<a href="#" onclick="switchAuthTab('login');return false;">登录</a></p>
            <p><a href="/">返回首页</a></p>
        </form>
    </div>
    
    <!-- 粒子效果 -->
    <div id="particles-js"></div>
    <script>
      particlesJS('particles-js', {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#D4AF37"
          },
          "shape": {
            "type": "circle"
          },
          "opacity": {
            "value": 0.5,
            "random": true
          },
          "size": {
            "value": 3,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#D4AF37",
            "opacity": 0.2,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 1,
            "direction": "none",
            "random": true,
            "straight": false,
            "out_mode": "out",
            "bounce": false
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "grab"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 140,
              "line_linked": {
                "opacity": 0.5
              }
            },
            "push": {
              "particles_nb": 4
            }
          }
        },
        "retina_detect": true
      });

      // 头像预览功能
      document.getElementById('avatar-upload').addEventListener('change', function(e) {
          const file = e.target.files[0];
          if (file) {
              const reader = new FileReader();
              reader.onload = function(e) {
                  document.getElementById('avatar-preview-img').src = e.target.result;
              };
              reader.readAsDataURL(file);
          }
      });
    </script>
</body>
</html>
